import { Component, ViewChild } from '@angular/core';
import { ImageSlider, ImageSliderComponent, TopMenu } from './shared/components';
// import { ImageSlider, ImageSliderComponent, TopMenu } from './components';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('imageSlider', { static: true }) private imgSlider: ImageSliderComponent;
    private scrollableTabBgColor = 'red';

    private imageSliders: ImageSlider[] = [
        {
            imgUrl: 'https://cdn.pixabay.com/photo/2021/09/16/05/04/children-6628343_960_720.jpg',

            link: '',
            caption: '1'
        },
        {
            imgUrl: 'https://cdn.pixabay.com/photo/2020/09/15/16/06/wreath-5574054_960_720.jpg',
            link: '',
            caption: '2'
        },

        {
            imgUrl: 'https://cdn.pixabay.com/photo/2019/05/07/09/27/toucan-4185361_960_720.jpg',
            link: '',
            caption: '3'
        },
        {
            imgUrl: 'https://cdn.pixabay.com/photo/2021/09/16/21/27/container-ship-6631117_960_720.jpg',
            link: '',
            caption: '4'
        },
        {
            imgUrl: 'https://cdn.pixabay.com/photo/2021/08/19/12/53/bremen-6557996_960_720.jpg',
            link: '',
            caption: '5'
        }
    ];

    private topMenus: TopMenu[] = [
        {
            title: '热门',
            link: ''
        },
        {
            title: '男装',
            link: ''
        },
        {
            title: '百货',
            link: ''
        },
        {
            title: '运动',
            link: ''
        },
        {
            title: '手机',
            link: ''
        },
        {
            title: '家纺',
            link: ''
        },
        {
            title: '食品',
            link: ''
        },
        {
            title: '电器',
            link: ''
        }
    ];

    /**
     *  menu选中回调事件
     * @param menu 当前选中的菜单
     */
    private handleTabSelect(topMenu: TopMenu) {
        const colors = ['red', 'blue', 'black'];
        const idx = Math.floor(Math.random() * 3);
        this.scrollableTabBgColor = colors[idx];
    }
}
